<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>Document</title>
    <style>
        div {
            width: 10rem;
            height: 10rem;
            background: red;
            margin: 12rem auto;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        const oDiv = document.querySelector('div');
        let oldS=1;
        let s=1;
        const getS = (ev) => {
            let x1=ev.targetTouches[0].pageX;
            let y1=ev.targetTouches[0].pageY;

            let x2=ev.targetTouches[1].pageX;
            let y2=ev.targetTouches[1].pageY;

            let a=x2-x1;
            let b=y1-y2;

            return  Math.sqrt(a*a+b*b);           
        }
        oDiv.addEventListener('touchstart', (ev) => {

            let downS=getS(ev);

            const fnMove = (ev) => {
                let moveS=getS(ev);

                s=moveS/downS*oldS;

                oDiv.style.transform='scale('+s+')';
            };
            const fnEnd = () => {
                oldS=s;
                document.removeEventListener('touchmove', fnMove);
                document.removeEventListener('touchend', fnEnd);
            }

            document.addEventListener('touchmove', fnMove);
            document.addEventListener('touchend', fnEnd);

            ev.preventDefault();
        })

    </script>
</body>

</html>